<!--作者：彭心愉
描述：个人评分页面
修改人：彭心愉  -->
<template>
<hr class="langHr">
<hr class="shortHr">
<div class="nav">
    <div class="nav1">个人评分<span></span> <span></span>   <hr class="leftline" ><hr class="rightline"></div>
    <div class="nav2" @click="jumpTeamScore">小组评分<span></span> <span></span>   <hr class="leftline" ><hr class="rightline"></div>
</div>
 <div class="search">
         <el-row :gutter="20">
            <!-- <el-input v-model="itemname" class="w-50 m-2 inputtext"  placeholder="项目名称" /> -->
            <el-cascader :options="Project" placeholder="项目名称"  class="w-50 m-2 inputtext"/>
         </el-row>
        <el-row :gutter="20">
            <!-- <el-input  class="w-50 m-2 inputtext"  placeholder="小组名称" /> -->
            <el-cascader :options="Teams" placeholder="小组名称"  class="w-50 m-2 inputtext"/>
        </el-row>
        <el-row :gutter="20">
            <el-button color="#3e94ad" class="btn" >查询</el-button>
        </el-row>

</div>
<div class="carousel">
  <el-carousel :interval="4000" type="card" height="450px">
    <el-carousel-item v-for="item in 6" :key="item" >
     <div class="coreImg">
       <img src="@/assets/imgs/testimg.png" alt="">
     </div>
     <span class="name">王大壮{{item}}号</span> <span class="score">{{80+item+'.0'}}</span>
     <hr>
     <span class="lesson">前端框架课</span>
     <span class="details" @click="jumpMyScoreInfo" >详情</span>
    </el-carousel-item>
  </el-carousel>
</div>

       <div class=" el-overlay is-message-box" v-if="pageShow">
            <div class="addpage">
                <my-scoreInfo @closeclickMy="closeclickMy"></my-scoreInfo>
            </div>
        </div>
</template>


<script>
import myScoreInfo from './MyScoreInfo.vue';
import { useRouter, useRoute} from 'vue-router'
import { ref} from 'vue'
export default{
    name:'MyScore',
    components:{myScoreInfo},
    setup(){
              //  下拉框
            const Teams = [
                {
                    value: "team1",
                    label: "小组1",
                },
                {
                    value: "team2",
                    label: "小组2",
                },
            ];
            const Project = [
                {
                    value: "name1",
                    label: "项目1",
                },
                {
                    value: "name2",
                    label: "项目2",
                },
            ];

            let pageShow = ref(false)
            const itemname = ref('')
            const teamName = ref('')
            const router =  useRouter()
            const route = useRoute()
            function jumpTeamScore() {
                router.push({name:'teamscore'})
            }
            
        function closeclickMy(isclose){
            if(isclose==false){
                pageShow.value=false
            }
        }
        function jumpMyScoreInfo() {
            //  router.push(  {name:'teamscoreinfo'} )
            pageShow.value=true
        }
        return{
          itemname,
          teamName,
          jumpTeamScore,
          closeclickMy,
          jumpMyScoreInfo,
          pageShow,
          Teams,
          Project
        }
    }
}
</script>


<style lang="less" scoped>
.langHr{
      margin:0 60px;
    border: 1px solid rgb(194, 218, 226);
    margin-top: 90px;
    background-color: rgb(194, 218, 226);
}
.shortHr{
    margin-left: 60px;
    width: 200px;
    border: 4px solid rgb(62, 148, 173);
    margin-top: -4px;
    border-radius: 20px;
    background-color: rgb(62, 148, 173);

}
.nav{

    margin-left: 100px;
    margin-top: 20px;
    .nav1,.nav2{
        cursor: pointer;
        position: relative;
        width: 100px;
        height: 40px;
        border: 1px #999 solid;
        font-size: 14px;
        text-align: center;
        line-height: 50px;
        span{
            position: absolute;
            width: 4px;
            height: 4px;
            border: 1px #999 solid;
            border-radius: 50%;
            top:3px;
            background-color: white;
        }
        span:nth-child(1){
            left: 20px;
        }
        
    }
    .nav1{

        background-color: #3e94ad;
        margin-bottom: 10px;
        color:white;
        hr{
            width: 28px;
            transform:rotate(90deg);
            position: absolute;
            top: -7px;
             background-color: #999;

        }
        .leftline{
            left: 8px;
            border: 1px solid #999;
        }
        .rightline{
            left: 66px;
            border: 1px solid #999;
        }
    }
    .nav2{
          background-color: white;
        color: black;
        hr{
            width: 17px;
            transform:rotate(90deg);
            position: absolute;
            top: -3px;
             background-color: #999;
        }
         .leftline{
            left: 13px;
            border: 1px solid #999;
        }
        .rightline{
            left: 71px;
            border: 1px solid #999;
        }
    }
}
.search{
    position: absolute;
    display: flex;
    top: 120px;
    right: 150px;
    width: 500px;
    justify-content: space-between;

    
}
.carousel{

  // margin-left: 100px;
  margin: auto;
  margin-top: -20px;
    width:800px;
    .el-carousel{
      position: relative;
      // margin-top: 5px;
      .is-active{
        // margin-top: 10px;
        box-shadow: 10px 10px 20px #999;
      }
      .el-carousel__item{
        width: 400px;
        border-radius: 30px;
        text-align: center;
        background-color: white;
        // box-shadow: 0 0 20px #999;
        .coreImg{
          img{
            width: 400px;
            height: 300px;
          }
        }
        hr{
          margin-top: 35px;
        }
        span{
          position: absolute;
        }
        .name{
          top: 300px;
          left: 40px;
        }
        .score{
          left: 300px;
        }
        .lesson{
          width: 150px;
          height: 30px;
          border: #999 1px solid;
          border-radius: 30px;
          left: 35px;
          top: 370px;
          line-height: 30px;
          text-align: center;
          color: #999;
        }
        .details{
           top: 375px;
             color: #999;
             right: 80px;
        }
      }
    }
}

</style>
